<template>
  <div class="applyStatus">
    <main>
      <div class="switch-bar">
        <ul>
          <li :class="{chosen: curPageStatus === 1}" @click="curPageStatus = 1">已投递</li>
          <li :class="{chosen: curPageStatus === 2}" @click="curPageStatus = 2">待面试</li>
          <li :class="{chosen: curPageStatus === 3}" @click="curPageStatus = 3">结果</li>
        </ul>
      </div>
      <div class="position-container" v-if="curPageStatus < 2">
        <div v-for="pos of positions" :key="pos.id" class="position">
          <img src="@/assets/img/default.png" width="42">
          <span>
            {{ pos.hr }}<em class="vline"></em>
            {{ pos.hrJob }}
          </span>
          <div class="position-info">
            <div class="left">
              <p style="margin-bottom:8px">
                {{ pos.pos }}<span class="salary">
                {{ pos.minSalary }}~{{ pos.maxSalary }}</span>
              </p>
              <p class="desc">
                {{ pos.loc }}<em class="vline"></em>
                {{ pos.exp }}<em class="vline"></em>{{ pos.edubg }}
              </p>
            </div>
            <div class="right">
              <p style="text-align:right;margin-bottom:8px">{{ pos.corpName }}</p>
              <p class="desc">
                {{ pos.finacial }}<em class="vline"></em>{{ pos.scale }}
              </p>
            </div>
            <img :src="pos.ico" width="42">
          </div>
          <div class="btn primary" v-show="curPageStatus === 0">继续沟通</div>
        </div>
      </div>
      <div class="position-container" v-if="curPageStatus === 2">
        <div class="position" v-for="pos of interview" :key="pos.id">
          <img src="@/assets/img/default.png" width="42">
          <span>
            面试官：{{ pos.hr }}<em class="vline"></em>
            {{ pos.hrJob }}<em class="vline"></em>
            {{ pos.tel }}<em class="vline"></em>
            {{ pos.email }}
          </span>
          <div class="position-info">
            <div class="left">
              <p style="margin-bottom:8px">
                {{ pos.pos }}<span class="salary">{{ pos.minSalary }}~{{ pos.maxSalary }}</span>
              </p>
              <p class="desc">
                时间：{{ pos.date }}<em class="vline"></em>地点：{{ pos.loc }}
              </p>
            </div>
            <div class="right">
              <p style="text-align:right;margin-bottom:8px">{{ pos.corpName }}</p>
              <p class="desc">
                {{ pos.finacial }}<em class="vline"></em>{{ pos.scale }}
              </p>
            </div>
            <img :src="pos.ico" width="42">
          </div>
        </div>
      </div>
      <div class="position-container" v-if="curPageStatus === 3">
        <div
          v-for="pos of result" :key="pos.id"
          :class="{
            pass: pos.pass === 1,
            reject: pos.pass === 0,
          }"
          class="position">
          <img src="@/assets/img/default.png" width="42">
          <span>
            面试官：{{ pos.hr }}<em class="vline"></em>
            {{ pos.hrJob }}<em class="vline"></em>
            <span v-if="pos.pass !== null">{{ pos.pass === 0 ? '被拒绝' : '已通过' }}</span>
            <span v-else>等待中</span>
          </span>
          <div class="position-info">
            <div class="left">
              <p style="margin-bottom:8px">
                {{ pos.pos }}<span class="salary">
                {{ pos.minSalary }}~{{ pos.maxSalary }}</span>
              </p>
              <p class="desc">
                {{ pos.loc }}<em class="vline"></em>
                {{ pos.exp }}<em class="vline"></em>{{ pos.edubg }}
              </p>
            </div>
            <div class="right">
              <p style="text-align:right;margin-bottom:8px">{{ pos.corpName }}</p>
              <p class="desc">
                {{ pos.finacial }}<em class="vline"></em>{{ pos.scale }}
              </p>
            </div>
            <img :src="pos.ico" width="42">
          </div>
        </div>
      </div>
    </main>
    <aside>
      <div class="aside">
        <div class="personal-info" v-if="userInfo()">
          <a class="button" @click="$router.push({ name: 'Resume' })">编辑</a>
          <img width="60" :src="userInfo().thumb">
          <p>{{ personInfo.name }}</p>
          <p class="desc">
            {{ personInfo.age }}岁<i class="inline"></i>
            {{ personInfo.personState }}<i class="inline"></i>
            {{ personInfo.edubg }}
          </p>
          <Select
            width="145px"
            v-model="personInfo.status"
            placeholder="工作类型" @on-change="changeFindJobStatus">
            <Option
              v-for="item of [{key:'0', value:'在职-考虑机会'}
              , {key:'1', value:'在职-月内到岗'}
              , {key:'2', value:'离职-随时到岗'}]"
              :key="item.key"
              :label="item.value"
              :value="item.key">
                {{ item.value }}
            </Option>
          </Select>
          <div class="apply-status">
            <a href="#/chat">{{ personInfo.comm }}<p>沟通过</p></a>
            <a>{{ personInfo.apply }}<p>已投递</p></a>
            <a>{{ personInfo.interview }}<p>已面试</p></a>
          </div>
        </div>
      </div>
    </aside>
  </div>
</template>
<script>
// eslint-disable-next-line camelcase
import api_main from '@/api/mainPage';
import Select from '@/components/select/Select';
import Option from '@/components/select/Option';
import Pages from '@/components/Pages/index';
import api from '@/api/applyStatus';
import nginx from '@/assets/nginxconfig';

export default {
  name: 'ApplyStatus',
  data() {
    return {
      citys: [],
      curPageStatus: 3,
      personInfo: {
      },
      positions: [
        {
          id: 'pos1',
          hr: '苇名一心',
          hrJob: '职业',
          pos: '前端开发工程师',
          minSalary: '1000',
          maxSalary: '2000',
          loc: '广州',
          exp: '经验不限',
          edubg: '中专',
          corpName: '今日头条',
          finacial: '天使轮',
          scale: '100-499人',
        },
        {
          id: 'pos2',
          hr: '苇名一心',
          hrJob: '职业',
          pos: '大前端开发工程师',
          minSalary: '1000',
          maxSalary: '2000',
          loc: '广州',
          exp: '经验不限',
          edubg: '中专',
          corpName: '今日头条',
          finacial: '天使轮',
          scale: '100-499人',
        },
        {
          id: 'pos3',
          hr: '苇名一心',
          hrJob: '职业',
          pos: '圣前端开发工程师',
          minSalary: '1000',
          maxSalary: '2000',
          loc: '广州',
          exp: '经验不限',
          edubg: '中专',
          corpName: '今日头条',
          finacial: '天使轮',
          scale: '100-499人',
        },
      ],
      interview: [
        {
          id: 'pos1',
          hr: '苇名一心',
          hrJob: '职业',
          pos: '前端开发工程师',
          tel: '17600000000',
          email: '123@qq.com',
          minSalary: '1000',
          maxSalary: '2000',
          date: '2019-04-05 12:30:00',
          loc: 'A省A市A区xxxxxxxx',
          corpName: '今日头条',
          finacial: '天使轮',
          scale: '100-499人',
        },
      ],
      result: [
        {
          id: 'pos1',
          pass: 1,
          hr: '苇名一心',
          hrJob: '职业',
          pos: '前端开发工程师',
          tel: '17600000000',
          email: '123@qq.com',
          minSalary: '1000',
          maxSalary: '2000',
          date: '2019-04-05 12:30:00',
          loc: '广州',
          exp: '经验不限',
          edubg: '中专',
          corpName: '今日头条',
          finacial: '天使轮',
          scale: '100-499人',
        },
        {
          id: 'pos2',
          pass: 0,
          hr: '苇名一心',
          hrJob: '职业',
          pos: '前端开发工程师',
          tel: '17600000000',
          email: '123@qq.com',
          minSalary: '1000',
          maxSalary: '2000',
          date: '2019-04-05 12:30:00',
          loc: '广州',
          exp: '经验不限',
          edubg: '中专',
          corpName: '今日头条',
          finacial: '天使轮',
          scale: '100-499人',
        },
        {
          id: 'pos3',
          pass: 1,
          hr: '苇名一心',
          hrJob: '职业',
          pos: '前端开发工程师',
          tel: '17600000000',
          email: '123@qq.com',
          minSalary: '1000',
          maxSalary: '2000',
          date: '2019-04-05 12:30:00',
          loc: '广州',
          exp: '经验不限',
          edubg: '中专',
          corpName: '今日头条',
          finacial: '天使轮',
          scale: '100-499人',
        },
        {
          id: 'pos3',
          pass: null,
          hr: '苇名一心',
          hrJob: '职业',
          pos: '前端开发工程师',
          tel: '17600000000',
          email: '123@qq.com',
          minSalary: '1000',
          maxSalary: '2000',
          date: '2019-04-05 12:30:00',
          loc: '广州',
          exp: '经验不限',
          edubg: '中专',
          corpName: '今日头条',
          finacial: '天使轮',
          scale: '100-499人',
        },
      ],
    };
  },
  mounted() {
    this.getDetail();
    this.getCandidateDetail(sessionStorage.getItem('userId'));
  },
  methods: {
    getCandidateDetail(id) {
      const param = new URLSearchParams();
      param.append('userId', id);
      api.getCandidateDetailApi(param).then(async (response) => {
        this.personInfo = {
          name: response.data.data.sysUser.realname,
          age: response.data.data.sysUser.age,
          personState: this.getExpName2(response.data.data.bcandidate.experience),
          edubg: this.getEduName2(response.data.data.bcandidate.educated),
          status: response.data.data.bcandidate.status,
          comm: response.data.data.num1,
          apply: response.data.data.num2,
          interview: response.data.data.num3,
        };
      });
    },
    getEduName2(id) {
      switch (id) {
        case '0':
          return '小学';
        case '1':
          return '初中';
        case '2':
          return '高中';
        case '3':
          return '专科';
        case '4':
          return '本科';
        case '5':
          return '研究生';
        case '6':
          return '博士';
        default:
          return '小学';
      }
    },
    getExpName2(id) {
      switch (id) {
        case '0':
          return '应届生';
        case '1':
          return '一年以内 ';
        case '2':
          return '一到三年';
        case '3':
          return '三到五年';
        case '4':
          return '五到十年';
        case '5':
          return '五年以上';
        default:
          return null;
      }
    },
    getCity() {
      api.getCityApi().then(async (response) => {
        const datas = response.data.data;
        for (let i = 0; i < datas.length; i += 1) {
          this.citys.push({
            key: datas[i].businessId,
            value: datas[i].name,
          });
        }
      });
    },
    getDetail() {
      const params = new URLSearchParams();
      params.append('userId', sessionStorage.getItem('userId'));
      api.getDetailByUserIdApi(params).then(async (response) => {
        api.getCityApi().then(async (res) => {
          const datas = res.data.data;
          for (let i = 0; i < datas.length; i += 1) {
            this.citys.push({
              key: datas[i].businessId,
              value: datas[i].name,
            });
          }
          this.positions = [];
          this.interview = [];
          this.result = [];
          const datas1 = response.data.data;
          for (let i = 0; i < datas.length; i += 1) {
            const data = datas1[i];
            if (data.bdelivery.status === '0') {
              this.positions.push({
                id: data.bdelivery.businessId,
                hr: data.jobAndRecruiter.sysUser.realname,
                hrJob: data.jobAndRecruiter.bdept.name,
                pos: data.jobAndRecruiter.bjob.name,
                minSalary: data.jobAndRecruiter.bjob.minSalary,
                maxSalary: data.jobAndRecruiter.bjob.maxSalary,
                loc: this.getCityName(data.jobAndRecruiter.bjob.expectCity),
                exp: this.getExpName(data.jobAndRecruiter.bjob.experience),
                edubg: this.getEduName(data.jobAndRecruiter.bjob.educated),
                corpName: data.jobAndRecruiter.bcompany.name,
                finacial: this.getFinName(data.jobAndRecruiter.bcompany.financing),
                scale: this.getScaName(data.jobAndRecruiter.bcompany.scale),
                ico: nginx.nginxaddress + data.jobAndRecruiter.bcompany.ico,
              });
            } else if (data.bdelivery.status === '1') {
              this.interview.push({
                id: data.bdelivery.businessId,
                hr: data.binterview.linkMan,
                hrJob: data.jobAndRecruiter.bdept.name,
                pos: data.jobAndRecruiter.bjob.name,
                tel: data.binterview.linkPhone,
                email: data.binterview.linkEmail,
                minSalary: data.jobAndRecruiter.bjob.minSalary,
                maxSalary: data.jobAndRecruiter.bjob.maxSalary,
                date: data.binterview.interviewDate,
                loc: data.binterview.linkAddress,
                corpName: data.jobAndRecruiter.bcompany.name,
                finacial: this.getFinName(data.jobAndRecruiter.bcompany.financing),
                scale: this.getScaName(data.jobAndRecruiter.bcompany.scale),
                ico: nginx.nginxaddress + data.jobAndRecruiter.bcompany.ico,
              });
            } else {
              this.result.push({
                id: data.bdelivery.businessId,
                pass: data.bdelivery.status === '2' ? 0 : 1,
                hr: data.jobAndRecruiter.sysUser.realname,
                hrJob: data.jobAndRecruiter.bdept.name,
                pos: data.jobAndRecruiter.bjob.name,
                tel: data.binterview ? data.binterview.linkPhone : '未安排面试',
                email: data.binterview ? data.binterview.linkMan : '未安排面试',
                minSalary: data.jobAndRecruiter.bjob.minSalary,
                maxSalary: data.jobAndRecruiter.bjob.maxSalary,
                date: data.binterview ? data.binterview.interviewDate : '未安排面试',
                loc: this.getCityName(data.jobAndRecruiter.bjob.expectCity),
                exp: this.getExpName(data.jobAndRecruiter.bjob.experience),
                edubg: this.getEduName(data.jobAndRecruiter.bjob.educated),
                corpName: data.jobAndRecruiter.bcompany.name,
                finacial: this.getFinName(data.jobAndRecruiter.bcompany.financing),
                scale: this.getScaName(data.jobAndRecruiter.bcompany.scale),
                ico: nginx.nginxaddress + data.jobAndRecruiter.bcompany.ico,
              });
            }
          }
        });
      });
    },
    userInfo() {
      if (this.$store.getters['user/getUserInfo'].userId !== null) {
        return this.$store.getters['user/getUserInfo'];
      }
      return null;
    },
    changeFindJobStatus() {
      const params = new URLSearchParams();
      params.append('userId', this.userInfo().userId);
      params.append('status', this.personInfo.status);
      api_main.changeFindJobStatusApi(params).then(async (response) => {
        if (response.data.code === 200) {
          this.$alert('修改成功');
        } else {
          this.$alert(response.data.message);
        }
      });
    },
    getEduName(id) {
      switch (id) {
        case '0':
          return '不限';
        case '1':
          return '小学';
        case '2':
          return '初中';
        case '3':
          return '高中';
        case '4':
          return '专科';
        case '5':
          return '本科';
        case '6':
          return '研究生';
        case '7':
          return '博士';
        default:
          return null;
      }
    },
    getFinName(id) {
      switch (id) {
        case '0':
          return '天使轮';
        case '1':
          return 'A轮';
        case '2':
          return 'B轮 ';
        case '3':
          return 'C轮';
        case '4':
          return '不需要融资';
        default:
          return null;
      }
    },
    getScaName(id) {
      switch (id) {
        case '0':
          return '1-10人';
        case '1':
          return '11-50人';
        case '2':
          return '51-100人 ';
        case '3':
          return '101-500人';
        case '4':
          return '501-1000人';
        case '5':
          return '1001-5000人';
        case '6':
          return '5001-10000人';
        case '7':
          return '>10000人';
        default:
          return null;
      }
    },
    getExpName(id) {
      switch (id) {
        case '0':
          return '不限';
        case '1':
          return '应届生';
        case '2':
          return '一年以内 ';
        case '3':
          return '一到三年';
        case '4':
          return '三到五年';
        case '5':
          return '五到十年';
        case '6':
          return '五年以上';
        default:
          return null;
      }
    },
    getCityName(id) {
      for (let i = 0; i < this.citys.length; i += 1) {
        if (this.citys[i].key === id) {
          return this.citys[i].value;
        }
      }
      return null;
    },
  },
  components: {
    Select,
    Option,
    Pages,
  },
};
</script>
<style lang="less">
@import url(../../../static/style/site.vars.less);
.applyStatus {
  display: flex;
  justify-content: flex-start;
  &>main {
    flex: 1;
    margin-top: 30px;
    margin-right: 10px;
    .switch-bar {
      height: 43px;
      color: #000;
      background: #fff;
      border-bottom: 3px solid #EFF6FF;
      padding-left: 8px;
      ul {
        list-style: none;
        li {
          border-bottom: 2px transparent solid;
          float: left;
          margin: 0 20px;
          padding: 10px 0;
          padding-top: 12px;
          cursor: pointer;
          user-select: none;
          font-size: 14px;
        }
        .chosen {
          border-color: rgb(43, 142, 255);
          color: rgb(43, 142, 255);
        }
      }
    }
    .position-container {
      padding: 20px 0;
      padding-top: 0;
      background: #fff;
      .position {
        padding: 0 30px;
        padding-top: 20px;
        position: relative;
        border-bottom: 1px solid #EFF6FF;
        &.pass {
          background-clip: border-box;
          background: rgba(175, 255, 151, 0.144);
          .position-info {
            background: transparent;
            border: 1px solid rgba(110, 110, 110, 0.157);
          }
        }
        &.reject {
          background-clip: border-box;
          background: rgba(255, 154, 151, 0.144);
          .position-info {
            background: transparent;
            border: 1px solid rgba(110, 110, 110, 0.157);
          }
        }
        .btn.primary {
          position: absolute;
          top: 20px;
          right: 30px;
          display: none;
        }
        &:hover .btn {
          display: block;
        }
        &>img {
          border-radius: 30px;
        }
        &>span {
          display: inline-block;
          position: relative;
          top: -25px;
          font-size: 14px;
          margin-left: 10px;
        }
        .desc {
          color: rgb(185, 185, 185);
          font-size: 12px;
        }
        .position-info {
          margin-left: 55px;
          margin-bottom: 20px;
          padding: 10px 20px;
          background: #EFF6FF;
          font-size: 14px;
          display: flex;
          justify-content: flex-start;
          align-items: flex-start;
          .left {
            flex: 1;
            .salary {
              margin-left: 20px;
              color: #FC6C38;
            }
          }
          .right {
            margin-right: 15px;
          }
        }
      }
    }
  }
  &>aside {
    margin-top: 30px;
    .aside {
      box-sizing: border-box;
      position: relative;
      width: 218px;
      .personal-info {
        background: #fff;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 30px 10px;
        padding-bottom: 20px;
        .button {
          position: absolute;
          right: 10px;
          top: 10px;
          cursor: pointer;
          transition: color .3s ease;
          user-select: none;
          font-size: 12px;
          &:hover {
            color: @site-main;
          }
        }
        &>img {
          border-radius: 60px;
          margin-bottom: 10px;
        }
        &>p {
          margin-bottom: 5px;
          &.desc {
            font-size: 12px;
            margin-top: 3px;
          }
        }
        .select-box {
          margin: 10px 0;
        }
        .apply-status {
          display: flex;
          justify-content: center;
          align-items: center;
          text-align: center;
          margin: 10px 0;
          &>a {
            cursor: pointer;
            margin: 0 15px;
            font-size: 16px;
            transition: color .1s ease;
            color: #000;
            &:hover {
              color: @site-main !important;
            }
            p {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
  .vline {
    display: inline-block;
    width: 1px;
    height: 12px;
    vertical-align: middle;
    background: #e0e0e0;
    margin: 0 10px;
  }
}
</style>
